<template>
  <div class="ant-color-predefine">
    <div
      class="ant-color-predefine__colors"
      v-for="(rows, rIdx) in colors"
      :key="rIdx"
    >
      <div
        v-for="color in rows"
        :key="color"
        :title="color"
        class="ant-color-predefine__color-selector"
        :class="{
          advance: color === 'advance',
          transparent: color === 'transparent',
        }"
        @click="handleSelect(color)"
      >
        <div :style="{ backgroundColor: color }"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PreDefine',
  emits: ['selected', 'hide'],
  computed: {
    colors() {
      return [
        // 第一行
        [
          '#fcc02e',
          '#f67c01',
          '#e64a19',
          '#d81b43',
          '#8e24aa',
          '#512da7',
          '#1f87e8',
          '#008781',
          '#05a045',
          '#4e342e',
        ],
        // 第二行
        [
          '#fed835',
          '#fb8c00',
          '#f5511e',
          '#eb1d4e',
          '#9c28b1',
          '#5d35b0',
          '#2097f3',
          '#029688',
          '#4cb050',
          '#5d4037',
        ],
        // 第三行
        [
          '#ffeb3c',
          '#ffa727',
          '#fe5722',
          '#eb4165',
          '#aa47bc',
          '#673bb7',
          '#42a5f6',
          '#26a59a',
          '#83c683',
          '#6d4c41',
        ],
        // 第四行
        [
          '#fff176',
          '#ffb74e',
          '#ff8a66',
          '#f1627e',
          '#b968c7',
          '#7986cc',
          '#64b5f6',
          '#80cbc4',
          '#a5d6a7',
          '#8d6e63',
        ],
        // 第五行
        [
          '#fff59c',
          '#ffcc80',
          '#ffab91',
          '#fb879e',
          '#cf93d9',
          '#9ea8db',
          '#90caf8',
          '#b2dfdc',
          '#c8e6ca',
          '#bcaaa4',
        ],
        // 最后一行
        [
          'transparent',
          '#ffffff',
          '#dedede',
          '#a9a9a9',
          '#808080',
          '#4b4b4b',
          '#353535',
          '#212121',
          '#000000',
          'advance',
        ],
      ];
    },
  },
  methods: {
    handleSelect(color) {
      if ('advance' === color) {
        return this.$emit('hide');
      }
      this.$emit('selected', color);
    },
  },
};
</script>

<style scoped>
.ant-color-predefine {
  display: flex;
  flex-direction: column;
  width: 280px;
  font-size: 12px;
}
.ant-color-predefine__colors {
  display: flex;
  flex-wrap: wrap;
}
.ant-color-predefine__color-selector {
  position: relative;
  cursor: pointer;
  margin: 0;
  width: 28px;
  height: 28px;
}
.ant-color-predefine__color-selector:hover {
  transform: scale(1.2);
  z-index: 299;
  transition: transform 0.2s;
}
.ant-color-predefine__color-selector.transparent::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      45deg,
      #c5c5c5 25%,
      transparent 0,
      transparent 75%,
      #c5c5c5 0,
      #c5c5c5
    ),
    linear-gradient(
      45deg,
      #c5c5c5 25%,
      transparent 0,
      transparent 75%,
      #c5c5c5 0,
      #c5c5c5
    );
  background-size: 6px 6px;
  background-position: 0 0, 3px 3px;
}
.ant-color-predefine__color-selector.transparent::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  transform: rotate(-45deg);
  transform-origin: 0 0;
  width: 38px;
  height: 1px;
  background: red;
}
.ant-color-predefine__color-selector.advance {
  background: url();
}
.ant-color-predefine__color-selector > div {
  height: 100%;
}
</style>
